---
const { index, text, url, externalPlayer } = Astro.props
const delay = index * 400
---

<li
  style={{ animationDelay: `${delay}ms` }}
  class="animate-fade-in-up mt-4 flex justify-end opacity-0 backdrop-blur-sm"
>
  {
    externalPlayer && (
      <a
        href={url}
        target="_blank"
        class="clips-drawer-open animate-fade-in duration-600 before:z-1 group relative z-0 flex cursor-pointer flex-col items-start justify-start space-x-2 break-words rounded-2xl rounded-br-none bg-pink-200/60 px-3 pb-4 pt-6 text-left text-lg font-normal lowercase before:absolute before:-top-5 before:left-6 before:text-8xl before:text-pink-500 before:content-['“'] hover:scale-105"
      >
        <span class="text-dark-magenta">{text}</span>
        <span class="relative mt-2 flex w-full items-center justify-end text-sm text-red-600 before:absolute before:right-0 before:top-0 before:h-[2px] before:w-[60px] before:rounded-full before:bg-pink-500 before:content-['']" />
      </a>
    )
  }
  {
    !externalPlayer && (
      <article class="animate-fade-in duration-600 before:z-1 relative z-0 flex flex-col items-start justify-start space-x-2 text-wrap break-words rounded-2xl rounded-br-none bg-pink-200/60 px-3 pb-4 pt-6 text-left text-lg font-normal lowercase before:absolute before:-top-5 before:left-6 before:text-8xl before:text-pink-500 before:content-['“'] hover:scale-105">
        <span class="text-dark-magenta cursor-default">{text}</span>
        <span class="relative mt-2 flex w-full items-center justify-end text-sm text-red-600 before:absolute before:right-0 before:top-0 before:h-[2px] before:w-[60px] before:rounded-full before:bg-pink-500 before:content-['']" />
      </article>
    )
  }
</li>
